<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ page language="java" import="com.qdairlines.constant.BaseConsts" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色列表</title>
<link rel="stylesheet" href="<%=basePath %>/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/plugins/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath %>/bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css">
    <link rel="stylesheet" href="<%=basePath%>/bootstrap/css/bootstrap-multiselect.css">
    <link href="<%=basePath %>/hplus/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basePath %>/plugins/bootstrapValidator/css/bootstrapValidator.min.css"  rel="stylesheet">
    
    
    <script src="<%=basePath %>/js/jquery.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrapQ.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/bootstrap-table.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
	
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/language/zh_CN.js"></script>
	<script src="<%=basePath%>/bootstrap/js/bootstrap-multiselect.js"></script>
	<script src="<%=basePath %>/js/util.js"></script>
	
	<link rel="stylesheet" href="<%=basePath%>/css/toastr.min.css">
	<script src="<%=basePath%>/js/toastr.min.js"></script>
	<script src="<%=basePath%>/js/toastrinit.js"></script>
	<script src="<%=basePath %>/plugins/layer/layer.js"></script>
<style> 
.table-hover>tbody>tr:hover{background-color:#C6E2FF}
</style>

<script type="text/javascript">
$(document).ready(function(){
	//控件初始化
    //角色状态选择框初始化
    $.ajax({
        url:"<%=basePath%>/dict/getMultiselect.do",
        type:"POST",
        dataType:"json",
        data:{dictionaryCode:"T_ROLE_STATUS"},
        success:function(data){
            $("#role_status").empty();
            $("#role_status").multiselect({
                enableFiltering: false,
                 maxHeight: 300
            });
     	   $("#role_status").multiselect('dataprovider',eval(data.jsonData));//数据初始化。如果有数据默认值，则需要参考最上面的代码
           $("#role_status").multiselect('select',data.defaultVal); //默认选择值
           $("#role_status").multiselect('refresh'); //配合默认选择值进行刷新
        }    
	 });
   //控件初始化完毕
	
	//初始化的时候，角色表格隐藏
	$("#table_permission_div").hide();
	 
	//在表中显示数据
    var url = '<%=basePath %>/role/listRolePage.do';
    $("#table").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:url,//请求url
            dataType:'json',
            queryParams:queryParams,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:true,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:10,
			pageNumber:1,
			sidePagination:'server',
			
            showRefresh: true,                  //是否显示刷新按钮
            striped:true,//行间隔色
            locale:"${language}" ,
            //showToggle : true, 
            toolbar:"#toolbar",
            height :"540",
            //showColumns:true
            clickToSelect:true,
            onClickRow: function (row,$element) {
          	  	  $element.addClass('info').siblings().removeClass('info').end();
            	  $("#table_permission_div").show();
            	//点击每一个用户，查询当前用户角色
            	  $("#permission_query_roleId").val(row.id);
            	
            	  $("#table_permission_title").text("<spring:message code='role.permission.relate' />：" + getRelatePermissionCount(row.id,"<%=BaseConsts.Y%>"));
            	  $("#table_permission_no_title").text("<spring:message code='role.permission.norelate' />：" + getRelatePermissionCount(row.id,"<%=BaseConsts.N%>"));
            	  
            	  $("#table_permission").bootstrapTable('refresh');
            	  $("#table_permission_no_relate").bootstrapTable('refresh');
            	  
            	  
            	  
            }


    });
    //在初始化和查询要传递的参数
    function queryParams(params){	
        return {
            roleCode : $("#query_roleCode").val() ,
            roleName : $("#query_roleName").val() ,
        	limit : params.limit ,
			offset : params.offset
        };
    };
    
   
    //查询按钮的点击事件
    $("#btn_query").click(function(){
        $("#table").bootstrapTable('refresh');
        
        $("#permission_query_roleId").val("-");
        $("#table_permission").bootstrapTable('refresh');
        $("#table_permission_no_relate").bootstrapTable('refresh');
        $("#table_permission_div").hide();
    });

    //添加
    $("#btn_add").click(function(){
    	 $('#myModal').modal('show');
    	 
    	 $('#role_id').val("");
    	 $('#roleCode').val("");
    	 $('#roleName').val("");
    	 $('#description').val("");
     	 $('#role_status').multiselect('disable');
    	
    });
   
    
  
    //保存角色
    
    $("#role_from").bootstrapValidator();
    $('#btn_role_save').click(function(){
    	  var bootstrapValidator = $("#role_from").data('bootstrapValidator');
    	  bootstrapValidator.resetForm(); //每次验证前都重置验证状态
    	  bootstrapValidator.validate();
    	  if(! bootstrapValidator.isValid()){
    	       return false;
    	  }

    	$.ajax({
    		type:"POST",
			dataType:"json",
            url:"<%=basePath%>/role/save.do",
            data:{id: $("#role_id").val(), 
            	roleCode: $("#roleCode").val(),
            	roleName: $("#roleName").val(),
            	description: $("#description").val()
            },
            success:function(data){
            	if(data=="error"){
            		toastr.error("<spring:message code='role.repetition' />");
            	}else{
            		toastr.success("<spring:message code='base.success' />");
               	    $('#myModal').modal('hide');
               	    $("#table").bootstrapTable('refresh');
            	}
            },error:function(data){
            	toastr.error("<spring:message code='base.error' />");
            }    
    	 });
    });
    
    
    
    
    
    //以下是关于权限的操作
    var listRolePermission = '<%=basePath %>/role/listRolePermission.do';
    $("#table_permission").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:listRolePermission,//请求url
            dataType:'json',
            queryParams:queryParamsRole,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:false,//是否分页
		    search: true, //客户端搜索        
            striped:true,//行间隔色
        	showHeader:false,
            locale:"${language}" ,
            toolbar:"#permission_toolbar",
            height :"243"
    });
    //在初始化和查询要传递的参数
    function queryParamsRole(params){	
        return {
        	roleId : $("#permission_query_roleId").val() ,
        	isRelated : "<%=BaseConsts.Y%>",
        	limit : params.limit ,
			offset : params.offset
        };
    };  
    
    
    
    $("#table_permission_no_relate").bootstrapTable({
    	/*数据参数清单*/
        method:'post',//请求方式
        url:listRolePermission,//请求url
        dataType:'json',
        queryParams:queryParamsRoleNoRelate,//传递参数
        contentType:'application/x-www-form-urlencoded',//请求数据内容格式
        /*样式参数清单*/ 
        //分页参数
        pagination:false,//是否分页
	    search: true, //客户端搜索        
        striped:true,//行间隔色
    	showHeader:false,
        locale:"${language}" ,
        toolbar:"#permission_toolbar_no_realte",
        height :"243"
    });
    //在初始化和查询要传递的参数
    function queryParamsRoleNoRelate(params){	
        return {
        	roleId : $("#permission_query_roleId").val() ,
        	isRelated : "<%=BaseConsts.N%>",
        	limit : params.limit ,
			offset : params.offset
        };
    };  
    
    
  
	
});//document结束

function orderFormatter(value,row,index){
	return index+1;
}

//角色状态系显示
function role_status_formatter(value, row, index) {
	if(row.status=='1'){
		return '<span class="text-success">' + row.statusName +'</span>';
	}
	if(row.status=='0'){
		return '<span class="text-danger">'  + row.statusName + '</span>';
	}
	else{
		return '<span class="text-danger">'  + row.statusName + '</span>';
	}
};

//已选择用户
function userCount_formatter(value, row, index) {
	
		return '<button type="button" class="btn btn-info btn-xs" onclick="show_user('+ row.id +',\''+ row.roleName  +'\')">'+ row.userCount +'</button>';
};


function show_user(roleId,roleName){
	layer.open({
		  id:'role_add_user',
		  type: 2,
		  maxmin:true,
		  title:"<spring:message code='role.adduser'/> :" + roleName,
		  area: ['80%', '95%'],
		  content: '<%=basePath %>/role/toAddUserPage.do?roleId='+roleId
	});
}

//角色操作
function operateFormatter(value, row, index) {
	if(row.status=='1'){
        return [
            '<a class="role_edit ml10" href="javascript:void(0)" title=" <spring:message code='base.edit' />">',
                '<span class="glyphicon glyphicon-edit "  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="role_disable ml10" href="javascript:void(0)" title="<spring:message code='base.disable' />">',
                '<span class="glyphicon glyphicon-remove"  style="font-size:15px;"></span>',
            '</a>',
             '&nbsp;&nbsp;&nbsp;&nbsp;',
             '<a class="delete_true ml10" href="javascript:void(0)" title="<spring:message code='base.delete.true' />">',
                '<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
              '</a>',
        ].join('');
    }else{
    	return [
    	        '<a class="role_edit ml10" href="javascript:void(0)" title="<spring:message code='base.edit' />">',
                '<span class="glyphicon glyphicon-edit "  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="role_able ml10" href="javascript:void(0)" title="<spring:message code='base.able' />">',
                '<span class="glyphicon glyphicon-ok"  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="delete_true ml10" href="javascript:void(0)" title="<spring:message code='base.delete.true' />">',
               '<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
             '</a>',
        ].join('');
    }
}


//权限操作
function permission_operateFormatter(value, row, index) {
	if(row.related=='yes'){
		 return [  '<a class="permission_delete ml10" href="javascript:void(0)" title="<spring:message code='base.delete' />">',
		              '<span class="fa fa-arrow-down"  style="font-size:15px;"></span>',
		          '</a>'
		      ].join('');
	}
	if(row.related=='no' && row.status=='1'){ 
		 return [  '<a class="permission_insert ml10" href="javascript:void(0)" title="<spring:message code='base.add' />">',
		              '<span class="fa fa-arrow-up"  style="font-size:15px;"></span>',
		          '</a>'
		      ].join('');
	}
	else{
		 return [  '<a class="permission_error ml10" href="javascript:void(0)" title="<spring:message code='role.permission.disable.msg' />">',
		              '<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
		          '</a>'
		      ].join('');
	}
}

//查询统计角色关联的权限统计数
function getRelatePermissionCount(roleId,isRelated){
	var count =  "";
	$.ajax({
		async:false,
		type:"POST",
		dataType:"json",
        url:"<%=basePath%>/role/getRolePermissionCount.do",
        data:{roleId : roleId ,	isRelated : isRelated},
        success:function(data){
        	count = data;
        },error:function(data){
        	count =  "error";
        }    
	 });
	return count;
}
//操作功能
window.operateEvents = {
	//角色操作
	'click a.role_edit': function (e, value, row, index) {
		$.ajax({
            type: "POST",
             url: "<%=basePath %>/role/getRole.do",
             data: {roleId:row.id},
             success: function(data){	
	             var obj = JSON.parse(data);
            	 $('#myModal').modal('show');
            	 
            	 $('#role_id').val(obj.id);
            	 $('#roleCode').val(obj.roleCode);
            	 $('#roleName').val(obj.roleName);
            	 $('#description').val(obj.description);
            	 
            	 $('#role_status').val(obj.status);
            	 $('#role_status').multiselect('select',obj.status); //默认选择值
             	 $('#role_status').multiselect('refresh'); //配合默认选择值进行刷新
             	 $('#role_status').multiselect('disable');
             }
         });
		

     } , 
     'click a.role_disable': function (e, value, row, index) {
       	bootstrapQ.confirm({
      			title:"<spring:message code='base.alert.title' />",
      			msg:"<spring:message code='role.disable.alert' />"   
      		},function(){
       			$.ajax({
		            type: "POST",
		            dataType:"json",
		             url: "<%=basePath %>/role/disable.do",
		             data: {id:row.id},
		             success: function(data){
		            	 if(data=="error"){
		            		 toastr.error("<spring:message code='role.disable.error' />");
		            	 }else{
		            	 	toastr.success("<spring:message code='base.success' />");
		            	 	$("#table").bootstrapTable('refresh');
		            	 }
		             },error:function(data){
		            	 toastr.error("<spring:message code='base.error' />");
		            	  $("#table").bootstrapTable('refresh');
		             }
		         });
       		});
       }, 
       'click a.role_able': function (e, value, row, index) {
          	bootstrapQ.confirm({
          		title:"<spring:message code='base.alert.title' />",
      			msg:"<spring:message code='role.able.alert' />"      
         		},function(){
	          		$.ajax({
	   		            type: "POST",
	   		             url: "<%=basePath %>/role/able.do",
	   		             data: {id:row.id},
	   		             success: function(data){
	   		            	 toastr.success("<spring:message code='base.success' />");
	   		                 $("#table").bootstrapTable('refresh');
	   		             } ,error:function(data){
			            	 toastr.error("<spring:message code='error' />");
			            	  $("#table").bootstrapTable('refresh');
			             }
	   		         });
          		});
          }
       //权限表单操作按钮
       ,'click a.permission_delete': function (e, value, row, index) {
         		$.ajax({
  		            type: "POST",
  		             url: "<%=basePath %>/role/deleteRolePermission.do",
  		             data: {rolePermissionId:row.rolePermissionId},
  		             success: function(data){
  		            	 toastr.success("<spring:message code='base.success' />");
  		                 $("#table_permission").bootstrapTable('refresh');
  		                 $("#table_permission_no_relate").bootstrapTable('refresh');
  		             } ,error:function(data){
		            	 toastr.error("<spring:message code='base.error' />");
		            	  $("#table_permission").bootstrapTable('refresh');
		            	  $("#table_permission_no_relate").bootstrapTable('refresh');
	            	 }
  		         });
          },'click a.permission_insert': function (e, value, row, index) {
       		$.ajax({
		             type: "POST",
		             url: "<%=basePath %>/role/saveRolePermission.do",
		             data: {permissionId:row.id,
		            	 roleId : $("#permission_query_roleId").val() 
		             	},	
		             success: function(data){
		            	 toastr.success("<spring:message code='base.success' />");
		                 $("#table_permission").bootstrapTable('refresh');
		                 $("#table_permission_no_relate").bootstrapTable('refresh');
		             } ,error:function(data){
	            	 toastr.error("<spring:message code='base.error' />");
	            	  $("#table_permission").bootstrapTable('refresh');
	            	  $("#table_permission_no_relate").bootstrapTable('refresh');
            	 }
		         });
      },
  	 'click a.delete_true': function (e, value, row, index) {

			bootstrapQ.confirm({
			title:"<spring:message code='base.alert.title' />",
 			msg:"<spring:message code='role.delete.alert' />"   
 		},function(){
 			$.ajax({
 	    		type:"POST",
 				dataType:"json",
 	            url:"<%=basePath%>/role/delete.do",
 	            data:{
 	            	roleId:row.id 
 	            },
 	            success:function(data){
 	            	if(data.msg == 'success'){
 	            		toastr.success("<spring:message code='base.success' />"); 
 	            	    $("#table").bootstrapTable('refresh');
 	           		 }
 	            },error:function(data){
 	            	toastr.error("<spring:message code='base.error' />"); 
 	            }
 	    	 });
  	});
	 }
} ;
</script>

</head>
<body >
 <div class="row" style="margin:1px">
  <div class="col-md-7 col-sm-7">
            <div id="toolbar">
                    <div class="form-inline" role="form" >
                    <form id="queryForm">
                        <div class="form-group">
                            <div  style="vertical-align:top ">
                                <input  type="text" id="query_roleCode"  class="" placeholder="<spring:message code='role.rolecode' />" > 
                                <input  type="text" id="query_roleName"  class="" placeholder="<spring:message code='role.rolename' />" > 	
                            </div>
                        </div>
                        
                        <button id="btn_query" 	type="button" class="btn btn-primary"> <spring:message code='base.search' /> </button>
                        <button id="btn_add" 	type="button" class="btn btn-primary"> <spring:message code='base.add' /></button>

					</form>
                    </div>
            </div>
            <table   id="table" class="table table-hover" >		  		    
                <thead>
                    <tr class="success"> 
                    	<th data-radio="true">i</th>
                        <!-- <th data-field="" data-formatter="orderFormatter">序号</th>  -->
                        <th data-field="roleCode"><spring:message code='role.rolecode' /></th>
                        <th data-field="roleName"  ><spring:message code='role.rolename' /></th> 
                        <!-- <th data-field="description"  >描述</th>  -->
               			<th data-field="userCount"  data-formatter="userCount_formatter"><spring:message code='role.userselectd' /></th> 
                        <th data-field="status"  data-formatter="role_status_formatter"><spring:message code='role.status' /></th> 
                        <th data-field="operation" data-formatter="operateFormatter" data-events="operateEvents"><spring:message code='base.operate' /></th>
                    </tr>
                </thead>             
            </table>
    	</div>      	
    	<div  class="col-md-5 col-sm-5" id = "table_permission_div">
    	    <input  type="text" id="permission_query_roleId"  class="hidden" > 
    	    <div class="row-fluid " >
	    	 	<div id="permission_toolbar">
	    	 		<span class="fa-stack fa-lg text-success">
				  		<i class="fa fa-square-o fa-stack-2x"></i>
				  		<i class="fa fa-chain fa-stack-1x"></i>
					</span>
				 	<span class="text-success" id = "table_permission_title"><spring:message code='role.permisssion.relate' /></span>
	            </div>
				<table id="table_permission"  class="table table-hover">
					<thead>
						<tr>
							<th data-field="permissionCode" > <spring:message code ='permission.permissioncode' /> </th>
							<th data-field="permissionName" ><spring:message code ='permission.permissionname' /></th>
							<th data-field="operation" data-formatter="permission_operateFormatter" data-events="operateEvents"><spring:message code ='base.operate' /></th>
						</tr>
					</thead>
	
				</table>
			</div>

		

      <div class="row-fluid " >
   	 	 	<div id="permission_toolbar_no_realte">
	    	  	 <span class="fa-stack fa-lg text-danger">
				  <i class="fa fa-square-o fa-stack-2x"></i>
				  <i class="fa fa-chain-broken fa-stack-1x"></i>
				</span>
				 <span class="text-danger" id = "table_permission_no_title"><spring:message code='role.permisssion.norelate' /></span>
	    	 </div>	
		<table id="table_permission_no_relate"  class="table table-hover">
			<thead>
				<tr>
					<th data-field="permissionCode" > <spring:message code ='permission.permissioncode' /> </th>
					<th data-field="permissionName" ><spring:message code ='permission.permissionname' /></th>
					<th data-field="operation" data-formatter="permission_operateFormatter" data-events="operateEvents"><spring:message code ='base.operate' /></th>
				</tr>
			</thead>

		</table>
	</div>
  </div> 
	
	
	<!-- modal -->
	    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   			aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               	<spring:message code ='role.editrole' />
	            </h4>
	         </div>
				<div class="modal-body">
					<form role="form" class="form-horizontal" id = "role_from">
						<input type="hidden" id="role_id" name="role_id" value="">
						<div class="form-group">
							<label for="roleCode" class="col-sm-3 control-label">  	<spring:message code ='role.rolecode' /><font
								color='red'>*</font>:
							</label>
							<div class="text-left col-sm-6">
								<input id="roleCode" type="text" name="roleCode"
									style="width:100%"  required  
									class="form-control" />
							</div>
						</div>


						<div class="form-group">
							<label for="roleName" class="col-sm-3 control-label"><spring:message code ='role.rolename' /><font
								color='red'>*</font>:
							</label>
							<div class="text-left col-sm-6">
								<input id="roleName" type="text" name="roleName"
									style="width:100%" required  
									class="form-control" />
							</div>
						</div>


						<div class="form-group">
							<label for="description" class="col-sm-3 control-label"><spring:message code ='role.description' /><font
								color='red'>*</font>:
							</label>
							<div class="text-left col-sm-6">
								<input id="description" type="text" name="description"
									style="width:100%" 
									required   class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label for="role_status" class="col-sm-3 control-label"><spring:message code ='role.status' /><font
								color='red'>*</font>:
							</label>
							<div class="text-left col-sm-6">
								<select id="role_status" name="role_status" class="form-control"></select>
							</div>
						</div>

					</form>
					 <div class="form-group">  
		                    <div style="text-align:center">  
		                        <button id= "btn_role_save" type="button" class="btn btn-primary btn-sm"><spring:message code ='base.save' /> </button>  
		                    </div>  
               			 </div>  
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	
</body>
</html>